<template>
	<view class="coupon">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'优惠券',color:'#fff'}" />
		<!-- #endif -->
		<view class="tab_list">
			<view @click="tabChex(1)" style="border-right: 1px solid #707070;"><text :class="{active:tabActive}">待使用</text></view>
			<view @click="tabChex(2)"><text :class="{active:!tabActive}">已使用/过期</text></view>
		</view>
		<view class="counpon_container">
			<view class="not_data" v-if="couponList.length == 0">
				<view class="" style="width:100%;height:419px">
					<image style="width: 50%;height: 50%;margin-top: 200px;" src="/static/images/my/no_more.png" mode=""></image>
				</view>
				<view class="not">
					<text>暂无优惠券使用</text>
				</view>
			</view>
			<view class="have_data" v-else>
				<view class="have_data_item" v-for="(item,index) in couponList" :key="index">
					<view class="left" :class="{used_type:tabActive}">
						<view><text>{{item.coupon_price}}</text>元</view>
						<text>现金券X1</text>
					</view>
					<view class="right">
						<view class="condition_box">
							<view class="condition">
								<view class="" v-if="item.coupon_min_price != 0">
									满{{item.coupon_min_price}} 可用
									<!-- {{item.coupon_title}} -->
								</view>
								<view class="" v-else>
									无门槛
								</view>
								<!-- <view class="" style="font-size: 25upx;font-weight: 500;">
									满{{item.coupon_min_price}} 可用
								</view> -->
							</view>
							<view class="validTime">有效期至 {{item.end_use_time}}</view>
						</view>
						<view class="button" @click="useCoupon(index)" :class="{used_type:tabActive}">
							{{tabActive?'去使用':'已使用'}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				type:'',
				orderPrice:0,
				tabActive:true,
				// couponList:[],
				couponList: [],
				constList:[],   //不做改变的列表
			};
		},
		onLoad(option) {
			console.log(option)
			this.type = option.type
			this.orderPrice = option.orderPrice
			// this.getCopon()
		},
		onShow() {
			this.getCopon()
		},
		methods:{
			tabChex(i){
				if(i == 1){
					this.tabActive = true
					this.couponList = this.constList.filter(el=>{
						return el.status == 0
					})
				}else{
					this.couponList = this.constList.filter(el=>{
						return el.status == 1 || el.status == 2
					})
					this.tabActive = false
				}
			},
			useCoupon(i){
				if(this.tabActive){
					if(this.type == "" || this.type == undefined){
						uni.reLaunch({
							url:'/pages/index/index'
						})
						return false;
					}
					if(this.orderPrice < Number(this.couponList[i].coupon_min_price)){
						uni.showToast({
							title:'当前优惠券不可用(未到达使用金额)',
							icon:"error"
						})
						return false;
					}
					let pages = getCurrentPages()
					let nowPage =  pages[pages.length -1]
					let prevPage = pages[pages.length-2]
					prevPage.$vm.orderDetail.coupon = this.couponList[i]
					uni.navigateBack({
						delta:1,
						animationType: 'pop-out',
						animationDuration: 200,
					})
				}else{
					return false;
				}
			},
			//获取列表
			getCopon(){
				 let  user = JSON.parse(uni.getStorageSync('userInfo'))
				 uni.showLoading({
					 title:'加载中...'
				 })
				this.$http({
					url:`/api/user/coupon/list/0`,
					method:'get',
					success:result=>{
					console.log(result,"getAddressgetAddressgetAddressgetAddressgetAddress")
						if(result.code == 200){
							uni.hideLoading()
							this.constList = JSON.parse(JSON.stringify(result.data))
							this.couponList = this.constList.filter(el=>{
								return el.status == 0
							})
						}
					}
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}
	.coupon {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		// padding: 9px 0;
		box-sizing: border-box;
		.tab_list {
			height: 50px;
			background: #fff;
			border-radius: 16px;
			display: flex;
			text-align: center;
			align-items: center;
			>view{
				flex: 1;
				>text{
					padding: 5px 0;
					font-size: 16px;
					color: #818181;
				}
			}
			
		}
		.counpon_container{
			flex: 1;
			margin-top: 9px;
			overflow-y: auto;
			.not_data{
				height: 100%;
				font-size: 20px;
				color: #4B4B4B;
				text-align: center;
				background-color: #fff;
			}
			.not{
				font-size: 14px;
				
			}
			.have_data{
				.have_data_item{
					margin: 10px 15px;
					height: 105px;
					display: flex;
					border-radius: 11px;
					overflow: hidden;
					.left{
						width: 100px;
						background-color: #AFAFAF;
						color: #fff;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						align-items: center;
						// border-radius: 11px 0 0 11px;
						>view{
							>text{
								font-size: 25px;
								margin-right: 4px; 
								font-weight: bold;
							}
						}
						text{
							font-size: 12px;
							// font-weight: bold;
						}
					}
					.right{
						flex: 1;
						background-color: #fff;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.condition_box{
							flex: 1;
							padding-left: 10px;
							.condition{
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 20px;
								font-weight: bold;
								margin: 10px;
							}
							.validTime{
								font-size: 12px;
								font-weight: 500;
								margin: 10px;
							}
						}
						.button{
							width: 20px;
							text-align: center;
							padding: 5px 0;
							color: #fff;
							font-size: 12px;
							border-radius: 14px;
							background-color: #AFAFAF;
							margin-right: 5px;
						}
					}
				}
			}
		}
	}
	.used_type{
		background-color:#3CE88C !important;
	}
	.active{
		color: #000;
		border-bottom: 5px solid #3CE688;
	}
</style>
